import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'

interface IProps {
  deductSum: {
    name: string
    value: number
  }[]
}
export default function Proportion(props: IProps) {
  const el = useRef<HTMLDivElement | null>(null)
  const ec = useRef<echarts.ECharts | null>(null)
  useEffect(() => {
    ec.current = echarts.init(el.current as HTMLDivElement)
  }, [])
  useEffect(() => {
    //扣分项占比
    (ec.current as echarts.ECharts).setOption({
      title: {
        text: '扣分项占比',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          data: props.deductSum,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: {
            formatter: '{b}: {d}%'
          }
        }
      ]
    });
  }, [props.deductSum])
  return (
    <div className="show" ref={el}></div>
  )
}
